<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单修饰符</title>
	</head>
	<body>
		 <div id="app">
			 <!-- 1. v-model.number 将输入的内容转化为数值类型 -->
			 年龄：<input type="text" v-model.number="ageTest"/>
			 <button @click="addNum">加法</button>
			 <br>
			 <!-- 2. 去除多余的空格 -->
			 用户名：<input type="text" v-model.trim="username"/>
			 用户输入的长度{{username.length}}
			 <br>
			 <!-- 3. 懒加载方式 -->
			 信息：<input type="text" v-model.lazy="msg"/>{{msg}}
		 </div>
		 <script src="../js/vue.js"></script>
		 <script>
			 const app = new Vue({
				 el: "#app",
				 data: {
					ageTest: '',
					username: '',
					msg: ''
				 },
				 methods: {
					 addNum(){
						 this.ageTest = this.ageTest + 1
					 }
				}
			 });
		 </script>
	</body>
</html>
